<template>
  <section class="sectionItem">
    <div class="sectionItemHead">
      <div class="QuaT center-block">
        <div class="anchor" id="w4"></div>
        <h3 class="circular-title">企业人员</h3>
        <div id="comBoxDl" class="QuaTle">
          <span :class="chooseIndex===0?'active':''" @click="tabAct(0)">注册人员</span>
          <span :class="chooseIndex===1?'active':''" @click="tabAct(1)">职称人员</span>
          <span :class="chooseIndex===2?'active':''" @click="tabAct(2)">其他人员</span>
        </div>
      </div>
    </div>

    <div class="comBox center-block">
      <div class="comBoxBody active" :class="type.length===0?'padding-top-0':''">
        <section class="active">
          <div id="QuaTle2" class="QuaTleR">
            <span :class="typeIdx==index?'active':''" v-for="(item,index) in type" :key="index" @click="typeFu(item.id,index)">{{item.title}}({{item.ti}})</span>
          </div>
          <div id="QuaBoy2" class="QuaBoy">

            <!--注册人员-->
            <section v-show="chooseIndex===0">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="leibie" label="注册号(执业印章号)" width="180"></el-table-column>
                <el-table-column prop="youDate" label="注册类别" width="165"></el-table-column>
                <el-table-column prop="youDate" label="注册专业" width="165"></el-table-column>
                <el-table-column prop="youDate" label="证书所在单位" width="165"></el-table-column>
                <el-table-column prop="jiguan" label="预警信息" width="205"></el-table-column>
                <el-table-column prop="daDate" align="right" width="105" label="有效期截止"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

            <!--职称人员-->
            <section v-show="chooseIndex===1">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="leibie" label="注册号(执业印章号)" width="180"></el-table-column>
                <el-table-column prop="youDate" label="职称类别"></el-table-column>
                <el-table-column prop="youDate" label="职称专业" width="165"></el-table-column>
                <el-table-column prop="youDate" label="资格状态" width="165"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

            <!--安管人员-->
            <section v-show="chooseIndex===2&&typeIdx===0">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="leibie" label="安全管理资格类别" width="180"></el-table-column>
                <el-table-column prop="youDate" label="资格有效期" width="165"></el-table-column>
                <el-table-column prop="jiguan" label="发证机关" width="205"></el-table-column>
                <el-table-column prop="daDate" align="right" label="发证日期"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

            <!--岗位人员-->
            <section v-show="chooseIndex===2&&typeIdx===1">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="youDate" label="资质类别"></el-table-column>
                <el-table-column prop="youDate" label="资质专业" width="165"></el-table-column>
                <el-table-column prop="youDate" label="发证日期" width="165"></el-table-column>
                <el-table-column prop="youDate" label="预警信息"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

            <!--技术人员-->
            <section v-show="chooseIndex===2&&typeIdx===2">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="youDate" label="资质类别"></el-table-column>
                <el-table-column prop="youDate" label="技术等级" width="165"></el-table-column>
                <el-table-column prop="youDate" label="发证日期" width="165"></el-table-column>
                <el-table-column prop="youDate" label="资格状态"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

            <!--特种人员-->
            <section v-show="chooseIndex===2&&typeIdx===3">
              <el-table  height="520" :data="tableData" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column  label="人员姓名" width="110">
                  <template slot-scope="scope">
                    <router-link to="/dataService/person/detail">{{scope.row.name}}</router-link>
                  </template>
                </el-table-column>
                <el-table-column prop="id" label="身份证" width="180"></el-table-column>
                <el-table-column prop="number" label="证书编号" width="130"></el-table-column>
                <el-table-column prop="youDate" label="证书类型"></el-table-column>
                <el-table-column prop="youDate" label="有效期截止" width="165"></el-table-column>
                <el-table-column prop="youDate" label="电子证书" width="165"></el-table-column>
                <el-table-column prop="youDate" label="预警信息"></el-table-column>
              </el-table>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="20">
                </el-pagination>
              </div>

            </section>

          </div>
        </section>
      </div>
    </div>

  </section>



</template>

<script>
  import { getPullStaff } from '@/api/dataService';
  export default {
    name: "tabPreson",
    data() {
      return {
        chooseIndex:0,
        typeIdx:0,
        staff: {},
        tableData:[],
        type:[],
        pull:{
          getType:[
            {
              title:'安管人员',
              id:'a88s7d36a6s',
              ti:9
            },
            {
              title:'岗位人员',
              id:'a88s7d36a7s',
              ti:5
            },
            {
              title:'技术工人',
              id:'a88s7d36a8s',
              ti:4
            },
            {
              title:'特种作业人员',
              id:'a88s7d36a9s',
              ti:9
            }
          ]
        }
      }
    },
    mounted() {
      this.getPullStaff();
    },
    methods: {
      getPullStaff(data) {
        getPullStaff(data).then(res => {
          //console.log(res)
          this.tableData = res.staff.rows
        })
      },
      tabAct(num){
        this.chooseIndex = num;
        if(num === 2 ){
          this.type = this.pull.getType
        }else {
          this.type = []
        }
      },
      typeFu(id,index){
        this.typeIdx = index
        //console.log(id)
      }
    },
    watch: {
    }
  }
</script>

<style scoped>
  @import '../../../assets/css/credit.css';
  table a:hover{
    color: #216DE5!important;
  }
  #QuaBoy2>section{
    display: block;
  }
</style>

